<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>flex 多行布局</title>
 <style>
  .container {
   width: 1366px;
   margin: 0 auto;
  }

  .mb-50 {
   margin-bottom: 50px;
  }

  /* 九宫格 */
  .jgg {
   display: flex;
   flex-wrap: wrap;
   width: 450px;
   margin: 0 auto;
   /* 总宽度 */
  }

  .jgg .cell {
   flex: 0 0 33.333%;
   /* 每个子元素占总宽度的三分之一 */
   display: flex;
   justify-content: center;
   /* 水平居中 */
   align-items: center;
   /* 垂直居中 */
   height: 150px;
   /* 单元格高度 */
   border-right: 1px solid #000;
   /* 右边框 */
   border-bottom: 1px solid #000;
   /* 底边框 */
   box-sizing: border-box;
  }

  /* 移除最右列的右边框 */
  .cell:nth-child(3n) {
   border-right: none;
  }

  /* 移除最底行的底边框 */
  .cell:nth-last-child(-n+3) {
   border-bottom: none;
  }
 </style>
</head>

<body>

 <!-- 经典九宫格 -->
 <section class="container mb-50">
  <div class="jgg">
   <div class="cell">1</div>
   <div class="cell">2</div>
   <div class="cell">3</div>
   <div class="cell">4</div>
   <div class="cell">5</div>
   <div class="cell">6</div>
   <div class="cell">7</div>
   <div class="cell">8</div>
   <div class="cell">9</div>
  </div>
 </section>
</body>

</html>